<script setup>
import { RouterView } from 'vue-router'
import { ref } from "vue";
const units = ref([{ title: 'test' }])
fetch("/api/dict").then(response => response.json()).then(data => units.value = data)

</script>

<template>
  <div className="custom-layout">
    <!-- <div className="left-list">
      <a-list>
        <a-list-item v-for="unit in units">{{ unit.title }}</a-list-item>
      </a-list>
    </div> -->
    <div className="main-content">
      <RouterView />
    </div>
  </div>
</template>

<style scoped>
.custom-layout {
  display: flex;
  /* 使用 Flexbox 布局 */
  height: 100vh;
  /* 确保组件高度占满整个视口 */
}

.left-list {
  width: calc(100% - 2px);
  /* 左侧列表区域宽度占屏幕五分之一，减去 2px 以避免边框重叠（假设存在边框） */
  height: 100%;
  /* 确保左侧列表区域高度全屏 */
  border-right: 1px solid #ccc;
  /* 可选：添加右侧边框以区分左右区域 */
}

.main-content {
  flex-grow: 1;
  /* 主要内容区域占据剩余空间 */
  height: 100%;
  overflow-y: auto;
  /* 可选：允许垂直滚动以处理内容过长的情况 */
}
</style>
